<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	</head>
	<style type="text/css">
		.Chat_info{
			width: 100%;
			height: calc(80vh);
			border: 1px solid darkgray;
			border-radius: 10px;
			overflow: scroll;
		}
		#msg{
			width: 80%;
			border-radius: 5px;
			padding: 10px;
			margin-top: 5px;
			border: none;
			border: 1px solid lightgrey;
		}
		button{
			padding: 5px;
		}
	</style>
	<body>
		<div class="contenter">
			<div style="text-align: center;">家医聊天室</div>
			<div class="Chat_info" style="overflow:hide;">
				
			</div>
			<div class="form-group">
				<input type="text" id="msg"/>
				<button type="button" class="btn btn-primary" id="send" onclick="send()">发送</button>
				<div>
				    上传文件 ： <input type="file" name = "file" id = "fileId" /> 
				    <button  type = "submit" name = "btn" style="width: 100%;" id = "btnId" onclick="check()" class="btn btn-primary">上传图片</button>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var ws = new WebSocket("ws://123.56.67.48:3000");
			//发送消息
			function send(){
				// $(".Chat_info").append("</br><span style=\"color:red;float:right\">"+$("#msg").val()+"</span>");
				$(".Chat_info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
						"<div >"+
						"<img src=\"../img/logo.png\" style=\"width:20px ;margin:auto;\">"+
						"</div>"+
						"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:lightblue;border-radius:5px;\">"+
						$("#msg").val()+
						"</div>"+
						"</div>");
				var msg = $("#msg").val();
				ws.send(msg);
				$("#msg").val("");
			}
			
			function check() {
			       var objFile = document.getElementById("fileId");
			       if(objFile.value == "") {
			           alert("不能空")
			       }
											var file = objFile.files[0];
											var reader = new FileReader();
											reader.readAsDataURL(file);
			       reader.onload=function(e) {
			       	// alert('文件读取完成');
			       	imgFile = e.target.result;
			       	console.log(imgFile);
												ws.send(imgFile);
												$(".Chat_info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
														"<div >"+
														"<img src=\"../img/logo.png\" style=\"width:20px ;margin:auto;\">"+
														"</div>"+
														"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:lightblue;border-radius:5px;\">"+
														"<img src=\""+imgFile+"\" width=\"100%\"/>"+
														"</div>"+
														"</div>");
			        }
											
			   }
			
			ws.onopen = function(evt){
				ws.send("有人上线");
			}
			
			// ws.onmessage = function(data){
			// 	console.log(data);
			// 	$(".Chat_info").append("</br><span style=\"color:blue\">"+data.data+"</span>");
			// }
			ws.onmessage = function(data){
				console.log(data);
				console.log(data.data.substring(5,10));
				if(data.data.substring(5,10) == 'image'){
					$(".Chat_info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
							"<div >"+
							"<img src=\"../img/logo.png\" style=\"width:20px ;margin:auto;\">"+
							"</div>"+
							"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:lightblue;border-radius:5px;\">"+
							"<img src=\""+data.data+"\" width=\"100%\"/>"+
							"</div>"+
							"</div>");
				}
				else {
					$(".Chat_info").append("</br><div class=\"photo\" style=\"width: 50%;display: grid;grid-template-columns: 15% 85%;\">"+
							"<div >"+
							"<img src=\"../img/logo.png\" style=\"width:20px ;margin:auto;\">"+
							"</div>"+
							"<div class=\"pat_msg\" style=\"white-space: normal;word-break:break-all;overflow:hidden;background-color:#C2C2C2;border-radius:5px;\">"+
							data.data+
							"</div>"+
							"</div>");
				}
			}
			
			
			ws.onerror = function(){
				console.log("链接出现错误");
			}
			
			ws.onclose = function(e){
				try{
					ws.send("有人下线");
				}catch(e){
					//TODO handle the exception
					console.log(e)
				}
			}
		</script>
	</body>
</html>
